<template>
  <div class="app-container">
    <div class="box-border">
      <el-table border :data="table1Data" :header-cell-style="{ 'text-align': 'center' }" @row-dblclick="rowdbclick"
        @cell-click="celldbclick" :cell-class-name="tableCellClassName" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column align="left" fixed label="序号" min-width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="deviceName" label="装置" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="left" prop="productName" label="产品名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>{{ item.productName }}</span>
              <!-- <el-select placeholder="请选择" v-model="item.dosenNum">
                <el-option :label="item.dosenName" :value="item.dosenNum" v-for="item in name" :key="item.id" />
              </el-select> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="materialsName" label="辅材名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <!-- <span @click="xx(scope.row.auxiliaryMaterials[index])">{{ item.workTeamSname }}</span> -->
              <el-select placeholder="请选择" v-model="item.materialsName" size="mini" @change="change($event,scope.$index,index)">
                <el-option :label="item.dosenName" :value="item.dosenNum" v-for="item, in scope.row.threeDosenSubList"
                  :key="item.id" />
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="batch" label="批次" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <!-- <span>{{ item.batch }}</span> -->
              <!-- <span>{{index+1}}</span> -->
              <el-select placeholder="请选择" v-model="item.batchVal" size="mini">
                <el-option :label="item.batchName" :value="item.batchId"
                  v-for="(item,index3) in scope.row.auxiliaryMaterials[index].batch" :key="index3"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="collectTime" label="领用时间" show-overflow-tooltip width="156px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>{{item.collectTime}}</span>
              <!-- <el-date-picker v-model="item.collectTime" type="datetime" placeholder="选择日期时间" size="mini"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="beginTime" label="开始使用时间" show-overflow-tooltip width="156px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <!-- <el-date-picker v-model="item.beginTime" type="datetime" placeholder="选择日期时间" size="mini"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="endTime" label="结束使用时间" show-overflow-tooltip width="156px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                <!-- <el-date-picker v-model="item.endTime" type="datetime" placeholder="选择日期时间" size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker> -->
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="collectNum" label="领料量" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.collectNum}}
              </span>
            </div>
          </template>

        </el-table-column>
        <el-table-column align="left" prop="consumptionCoefficient" label="消耗系数" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                <el-input v-model="item.consumptionCoefficient" placeholder="请输入" size="mini"></el-input>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="theoreticalNum" label="理论产量" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.theoreticalNum}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="periodQuantity" label="开始-当前期间产量" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.periodQuantity}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="beginQuantity" label="开始时间累计产量" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.beginQuantity}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="endQuantity" label="当前累计产量" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.endQuantity}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="alarmValue" label="库存报警值" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                {{item.alarmValue}}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.auxiliaryMaterials" :key="index" class="lix">
              <span>
                <el-button type="text" size="small">保存</el-button>
                <el-button type="text" size="small">提交</el-button>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="detail(scope)" type="text" size="small">
              详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="新增" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="addData(scope.row)" type="text" size="small">
              新增
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="辅材三剂" :visible.sync="detailVisible" width="1200px">
      <div style="margin-bottom:5px;">
        <span>时间：</span>
        <el-date-picker is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
          placeholder="选择时间范围" :clearable="false" type="datetimerange" v-model="seTime"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <!-- <el-button type="primary" @click="getView" size="small" style="float: right;">查询
        </el-button> -->
      </div>
      <el-table border :data="detailData" :header-cell-style="{ 'text-align': 'center' }" ref="dataTable"
        height="300px">
        <el-table-column align="left" fixed label="序号" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="领取" align="center">
          <el-table-column label="批次" min-width="50" align="center" prop="batch" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="时间" min-width="50" align="center" prop="collectTime" show-overflow-tooltip>
          </el-table-column>
        </el-table-column>
        <el-table-column label="开始使用" align="center">
          <el-table-column label="时间" min-width="50" align="center" prop="beginTime" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="班组" min-width="50" align="center" prop="startTeamName" show-overflow-tooltip>
          </el-table-column>
        </el-table-column>
        <el-table-column label="结束使用" align="center">
          <el-table-column label="时间" min-width="50" align="center" prop="endTime" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="班组" min-width="50" align="center" prop="endTeamName" show-overflow-tooltip>
          </el-table-column>
        </el-table-column>
        <el-table-column label="辅材数量" min-width="50" align="center" prop="collectNum" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="开始结束期间产量" min-width="50" align="center" prop="periodQuantity" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="detailClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "departmentAna",
  data () {
    return {
      batchs: '',
      seTime: [],
      startTime: '',
      endTime: '',
      viewData: '',
      detailVisible: false,
      detailData: [],
      name: [],
      yLoading: false,
      handleSelection: [],
      pageData: {
        pageNum: 1,
        pageSize: 10,
      },
      pageData2: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      total2: 0,
      queryData: {
        companyOrgCode: "", //公司companyOrgCode-->工厂workShopOrgCode暂用
        workShopOrgCode: '',
        dosenNum: '',
        dosenName: ''
      },
      //搜索参数储存
      queryDatanew: {
        companyOrgCode: "",
        workShopOrgCode: '',
        dosenNum: '',
        dosenName: ''
      },
      mLoading: false,
      table1Data: [
      ],
      cjList: [],
      zzList: [],
      userCode: '',
      userName: '',
      saveData1: [],
      currentCell: '',
      currentCell2: ''
    };
  },
  created () {
    fetch("./newTable.json").then(res => {
      return res.json()
    }).then(res => {
      this.table1Data = res.data.records
      console.log(res, 123);

    })
  },
  methods: {
    change(e,i1,i2){
      var options = this.table1Data[i1].threeDosenSubList.filter(item=>item.dosenNum==e)[0].batchs;
      console.log(options)
      this.$set(this.table1Data[i1].auxiliaryMaterials[i2],"batch",options)
    },
    batchChange () { },
    // saveAuxiliary (s, row) {
    //   console.log(s, row, 'save');
    //   let oData = {}
    //   oData.type = '1'
    //   oData = { ...s, ...row }
    //   delete oData.auxiliaryMaterials
    //   delete oData.threeDosenSubList
    //   saveAccessories(oData).then(res => {
    //     if (res.code == 200) {
    //       this.loadPage()
    //       this.$message({ type: "success", message: res.msg })
    //     } else {

    //     }
    //   }).catch(() => {
    //     this.$message({ type: "error", message: "error" })
    //   })
    // },
    // submitData (s) {
    //   console.log(s, row, 'save');
    //   let oData = {}
    //   oData.type = '2'
    //   oData = { ...s, ...row }
    //   delete oData.auxiliaryMaterials
    //   delete oData.threeDosenSubList
    //   saveAccessories(oData).then(res => {
    //     if (res.code == 200) {
    //       this.loadPage()
    //       this.$message({ type: "success", message: res.msg })
    //     } else {

    //     }
    //   }).catch(() => {
    //     this.$message({ type: "error", message: "error" })
    //   })
    // },
    save () { },
    submit () { },
    detail (val) {
      console.log(val)
      this.viewData = val.row
      this.detailVisible = true
    },

    detailClose () {
      this.detailVisible = false
    },
    // getView () {
    //   if (this.seTime) {
    //     this.startTime = this.seTime[0]
    //     this.endTime = this.seTime[1]
    //   } else {
    //     this.startTime = ''
    //     this.endTime = ''
    //   }
    //   console.log(this.viewData);
    //   let oData = {}
    //   oData.companyOrgCode = this.queryData.companyOrgCode
    //   oData.workShopOrgCode = this.queryData.workShopOrgCode
    //   oData.deviceCode = this.viewData.deviceCode
    //   oData.startTime = this.startTime
    //   oData.endTime = this.endTime
    //   oData = { ...oData, ...this.pageData2 }
    //   viewAccessoriesList(oData).then(res => {
    //     if (res.code == 200) {
    //       this.detailData = res.data.records
    //       this.total2 = res.data.total
    //     }
    //   })
    // },
    getTableList2 () {
      this.getView(this.pageData2.pageNum, this.pageData2.pageSize);
    },
    addData (row) {
      console.log(row, 'add');
      let obj = {
        productName: '',
        materialsName: '',
        batch: [],
        batchVal:"",
        collectTime: '',
        beginTime: '',
        endTime: '',
        collectNum: '',
        consumptionCoefficient: '',
        theoreticalNum: '',
        periodQuantity: '',
        beginQuantity: '',
        endQuantity: '',
        alarmValue: ''
      }
      row.auxiliaryMaterials.push(obj)
    },

    rowdbclick () {
      this.currentCell = "";
    },
    celldbclick (row, column) {
      console.log(666)
      this.currentCell = row.index + "," + column.index;
    },
    tableCellClassName ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    rowdbclick2 () {
      this.currentCell2 = "";
    },
    celldbclick2 (row, column) {
      this.currentCell2 = row.index + "," + column.index;
    },
    tableCellClassName2 ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // threeNameChange () { },
    // gsChange (val) {
    //   if (val == null) return null;
    //   this.cjList = []
    //   this.zzList = []
    //   this.table1Data = []
    //   this.table2Data = []
    //   this.name = []
    //   this.queryData.workShopOrgCode = ''
    //   this.queryData.dosenName = ''
    //   this.queryData.dosenNum = ''
    //   this.queryDatanew.companyOrgCode = (val.slice(-1))[0]
    //   this.queryData.companyOrgName = this.$store.state.user.companyList.find(i => i.orgCode == this.queryDatanew.companyOrgCode).orgAlias

    //   searchWorkShopByOrgCode(this.queryDatanew.companyOrgCode).then((res) => {
    //     this.cjList = res.data;
    //     if (!Array.isArray(val) && this.queryData.workShopOrgCode)
    //       this.cjChange(this.queryData.workShopOrgCode);
    //   });
    //   getAccessories(this.queryDatanew.companyOrgCode).then(res => {
    //     if (res.code == 200) {
    //       this.name = res.data
    //       console.log('name');
    //     } else {

    //     }
    //   })
    // },
    // cjChange (val) {
    //   if (val == null) return null;
    //   this.table1Data = []

    // },
    // zzChange (val) {
    //   if (val == null) return null;
    //   this.table1Data = []
    //   this.table2Data = []
    //   this.queryDatanew.deviceCode = val;
    //   this.$forceUpdate()
    //   this.queryData.deviceName = this.zzList.find(i => i.areaCode == val).areaAlias
    //   this.queryData.dosenName = ''
    //   this.queryData.dosenNum = ''
    //   this.name = []
    //   let data = {}
    //   data.companyOrgCode = this.queryDatanew.companyOrgCode
    //   data.companyName = this.queryData.companyName
    //   data.workShopOrgCode = this.queryData.workShopOrgCode
    //   data.departmentName = this.queryData.departmentName
    //   data.managementFlag = 2
    //   data.deviceName = this.queryData.deviceName
    //   let oData = { ...data }
    //   getAllThree(oData).then((res) => {
    //     this.name = res.data;
    //   })
    //   // getSjglThreeDosenFindAllEq({
    //   //   dosenName: "",
    //   //   equipCode: val,
    //   // }).then((res) => {
    //   //   this.name = res.data;
    //   // });
    // },

    // getTableList () {
    //   this.loadPage(this.pageData.pageNum, this.pageData.pageSize);
    // },

    //table页面展示 + 查询
    // loadPage (num = 1, size = 10) {
    //   this.pageData = {
    //     pageNum: num,
    //     pageSize: size,
    //   };
    //   this.queryData.companyOrgCode = this.queryDatanew.companyOrgCode
    //   // this.queryData.orgCode = this.$store.state.user.orgCode
    //   let data = { ...this.queryData, ...this.pageData };
    //   if (this.queryData.companyOrgCode && this.queryData.workShopOrgCode) {
    //     this.table1Data = []
    //     getAccessoriesList(data).then((res) => {
    //       if (res.code == 200) {
    //         this.table1Data = res.data.records
    //         this.total = res.data.total
    //         this.yLoading = false
    //       } else {
    //         this.yLoading = false
    //       }
    //     }).catch((err) => {
    //       this.yLoading = false
    //     });
    //   } else {
    //     this.$message({ type: "warning", message: "请选择公司和车间后查询！" })
    //   }

    // },
    // saveData () {
    //   if (this.saveData1.length == 0) {
    //     this.$message.message({ type: "warning", message: "请先查询出数据后保存" })
    //   } else {
    //     var nowlist = []
    //     let nowsavedata1 = JSON.parse(JSON.stringify(this.table1Data))
    //     nowsavedata1.map(item => {
    //       let keys = Object.keys(item);
    //       item.data.map(json => {
    //         item.analysisValue = json.analysisValue
    //         keys.map(e => {
    //           if (e != 'data') {
    //             json[e] = item[e]
    //           }
    //         })
    //         nowlist.push(json)
    //       })
    //     })
    //     console.log(nowlist, 12345);
    //   }
    // },
    // loadPage2 (num = 1, size = 10) {
    //   this.pageData2 = {
    //     pageNum: num,
    //     pageSize: size,
    //   };
    //   this.queryData.companyOrgCode = this.queryDatanew.companyOrgCode
    //   this.$set(this.queryData, "userCode", this.userCode); //增加操作人参数
    //   this.$set(this.queryData, "userName", this.userName); //增加操作人参数
    //   this.queryData.orgCode = this.$store.state.user.orgCode
    //   let data = { ...this.queryData, ...this.table2queryData };
    //   //table分页请求
    //   if (this.queryData.companyOrgCode && this.queryData.workShopOrgCode && this.table2queryData.statisticalMonthTime) {
    //     this.mLoading = true
    //     this.table2Data = []
    //     this.table2Datass = []
    //     this.table2Header = []
    //     dgetListAnaM(data).then((res) => {
    //       if (res.code == 200) {
    //         if (res.data.length > 0) {
    //           this.table2Data = res.data
    //           this.table2Header = (res.data)[0].data
    //           this.table2Data[3].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[3].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })
    //           this.table2Data[9].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[9].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })
    //           this.table2Data[11].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[11].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })
    //           this.table2Data[13].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[13].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })
    //           this.table2Data[15].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[15].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })
    //           this.table2Data[18].data.map((item, index) => {
    //             if (item.analysisValue != 0) {
    //               this.$set(this.table2Data[18].data[index], 'analysisValue', item.analysisValue + '%')
    //             }
    //           })

    //           this.mLoading = false
    //         } else {
    //           this.mLoading = false
    //         }
    //       } else {
    //         this.mLoading = false
    //       }

    //     }).catch((err) => {
    //       this.mLoading = false
    //     });
    //   } else {
    //     this.$message({ type: "warning", message: "请选择公司和车间/时间后查询！" })
    //   }

    // },
    handleSelectionChange (val) {
      this.handleSelection = val;
    },
    resetQuery1 () {
      this.queryData = {
        companyOrgCode: '',
        workShopOrgCode: '',
        dosenNum: '',
        dosenName: ''
      };
      this.queryDatanew = {
        companyOrgCode: '',
        workShopOrgCode: '',
        dosenNum: '',
        dosenName: ''
      };
      this.table1Data = []
      this.name = []
      this.zzList = []
      this.cjList = []
      this.pageData.pageNum = 1;
      this.total = 0
      // this.loadPage(1, 10);
    },

  },
};
</script>
<style  scoped >
/* // /deep/.el-input__inner {
//   text-align: center;
// }
// /deep/ input[type="number"] {
//   -moz-appearance: textfield !important;
// }
.data-table {
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type="‘number’"] {
    -moz-appearance: textfield !important;
  }

  ::v-deep .el-input__inner {
    text-align: center;
  } */

/deep/.el-table .cell {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.lix {
  height: 32px;
  border-bottom: 1px solid #dcdfe6;
}

.lix:last-child {
  border-bottom: none;
}
</style>
